<template>
  <section class="online-public-comment">
    <div class="naviga">数据采集&nbsp;>&nbsp;线上舆情数据&nbsp;>&nbsp;关注点评论详情
      <a href="#/menu/OnlinePublicOpinion" class="el-icon-close"
         style="font-size: 22px;line-height:35px;font-weight:600;float: right;margin-right: 30px;"></a>
    </div>
    <div class="border-r margin-top">
      <div class="tags-box" v-for="(item,idx) in typeListFormat">
        <div class="tag" :class="{'is-active':tagType=== (idx+1)}" @click="changType(idx+1)">
          <div class="tag-title">{{item.num | fmoney}}</div>
          {{item.type}}评论
        </div>
      </div>
      <el-table
        :data="tableDataComment"
        border
        style="width: 100%">
        <el-table-column
          prop="sentimentType"
          label="正负面"
          align="center"
          header-align="center"
          width="80">
          <template slot-scope="scope">
            <div class="type-circle"
                 :class="{ 'type-circle-1': scope.row.sentimentType=='正面', 'type-circle-2': scope.row.sentimentType=='负面',
                      'type-circle-3': scope.row.sentimentType=='中性'}"
            >{{scope.row.sentimentType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="评论信息"
          header-align="center"
          min-width="180">
          <template slot-scope="scope">
            <div class="comment-detail">
              <div>{{scope.row.sentimentComment}}</div>
                  <span class="comment-detail-imgs" v-for="(item, index) in scope.row.pictureArr">
                    <img :src="item" :alt="'评论图'+index">
                  </span>
              <div class="comment-detail-band">
                品牌：{{scope.row.brandName || "暂无"}} &nbsp;&nbsp;产品型号：{{scope.row.productCode || "暂无"}}
                <span class="right">{{ scope.row.sentimentTime|fdate}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="关注点"
          header-align="center"
          width="120">
          <template slot-scope="scope">
            <ul class="comment-focus-list">
              <li v-for="(item, index) in scope.row.focusClassifies">{{item.focusName}},</li>
            </ul>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px"
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </section>
</template>
<style lang="less" scoped>
  .right {
    float: right;
  }

  .tags-box {
  }

  .tag {
    float: left;
    width: 200px;
    margin: 20px 0 20px 20px;
    padding: 20px;
    border-radius: 10px;
    /*box-shadow: 2px 2px 10px #d2d2d2;*/
    background: #efefef;
    cursor: pointer;
    /*border: 1px solid #efefef;*/
  }

  .tag:hover {
    box-shadow: 2px 2px 10px #d2d2d2;
  }

  .tag-title {
    font-size: 20px;

  }

  .tag.is-active {
    background: linear-gradient(left, #04d6e5, #03a9f3);
    color: #fff;
    box-shadow: 2px 2px 10px #d2d2d2;
  }

  .comment-box {
    /*width:67%;*/
    width: 700px;
    /*min-height:500px;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .comment-detail {
    margin: 10px;
  }

  .comment-detail-imgs img {
    max-width: 100px;
    max-height: 100px;
    border: 1px solid #efefef;
    margin: 10px 10px 10px 0;
  }

  .comment-focus-list {
    margin: 0;
    padding: 0;

  li {
    list-style: none;
  }

  }
  .type-circle {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    /*padding: 0px;*/
    box-sizing: border-box;
    border-radius: 50%;
  }

  .type-circle-1 {
    border: 1px solid #05d5e6;
    background: #05d5e6;
  }

  .type-circle-2 {
    border: 1px solid #fa6969;
    background: #fa6969;
  }

  .type-circle-3 {
    border: 1px solid #ffc000;
    background: #ffc000;
  }
</style>
<style>
  .online-public-comment .el-table th.is-leaf, .online-public-comment .gutter {
    background: -webkit-linear-gradient(#fcfcfc, #ebebeb); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fcfcfc, #ebebeb); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fcfcfc, #ebebeb); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fcfcfc, #ebebeb); /* 标准的语法（必须放在最后） */
  }
</style>
<script type="es6">
  export  default {
    data() {
      return {
        focusId: 0,
        tagList: ["全部", "正面", "负面", "中性"],
        tagType: 1,
        total: 0,
        pSize: 10,
        currentPage: 1,
        typeList: {},
        typeListFormat: [],
        tableDataComment: []
      }
    },
    methods: {
      /* 表格
       * 数据采集-线上舆情数据-评论分析列表
       * */
      getTableData(){
        let params = {
          "method": "getSentiment",
          "query": {
            "pageNo": this.currentPage,
            "pageSize": this.pSize,
            "sentimentType": (this.tagList[this.tagType - 1] === "全部" ? null : this.tagList[this.tagType - 1]) || null,
            "focusId": this.focusId || null
          }
        }
        for (let i in params.query) {
          if (params.query[i] === "all") {
            params.query[i] = null
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.total = res.data.total;
            //console.log(res)
            this.tableDataComment = res.data.data.list;
            this.total = res.data.data.total;
          })
          .catch((error) => {
            this.tableDataComment = [];
            this.total = 0;
          });
      },
      /*
       * 评论分组数量
       * */
      getGroup(){
        if (!this.focusId) return this.$message.error("操作失败，没有关注点！");
        let params = {
          "method": "getSentimentFocusCount",
          "query": {
            "focusId": this.focusId
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.typeList = res.data.data;
            this.formatGroup();
          })
          .catch((error) => {
            this.typeList = {};
          });
      },
      /*
       * 分组数组
       * */
      formatGroup(){
        for (let j = 0; j < this.tagList.length; j++) {
          for (let i in this.typeList) {
            if (i === this.tagList[j]) {
              this.typeListFormat.push({
                type: i,
                num: this.typeList[i]
              })
            }
          }
        }
      },
      /*
       * 选择评论种类
       * */
      changType(type){
        if (this.tagType === type) return;
        this.tagType = type;
        this.getTableData();
        console.log(type)
      },
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableData();
      }
    },
    mounted(){
      this.focusId = this.$route.query.focusid === "null" ? null : this.$route.query.focusid;
      this.getGroup();
      this.getTableData();
    }
  }

</script>
